<template>
    <div ref="tableRef" class="table-container">
        <el-table :data="tableData" stripe :max-height="tableMaxHeight" :header-cell-style="headerCellStyle ?? {
            background: themeColor.background,
            color: themeColor.color,
        }" @sort-change="handleSortMethod" v-bind="$attrs" @selection-change="handleSelectionChange">
            <el-table-column v-if="selection" type="selection" :selectable="selectable" width="55"/>
            <template v-for="(i, index) in tableHeader" :key="index">
                <slot :name="i.prop">
                    <el-table-column v-if="i.prop === 'index'" type="index" :prop="i.prop" :label="i.label"
                                     :width="i.width || 'auto'" :show-overflow-tooltip="i.showOverflowTooltip"/>
                    <el-table-column v-else :prop="i.prop" :label="i.label" :width="i.width || 'auto'"
                                     :sortable="i.sortable" :show-overflow-tooltip="i.showOverflowTooltip"
                                     :fixed="i.fixed || false">
                        <template #default="scope">
                            <span v-if="!needDetail" :style="{ color: i?.style?.color }">
                                <span>{{ i.prefix }}</span>
                                <span v-if="i.map"
                                      :style="{ color: (i.colorMap && (i.colorMap[scope.row[i.prop]] || '#333')) }">
                                    {{ i.map[scope.row[i.prop]] ?? (i.defaultValue ?? '--') }}
                                </span>
                                <span v-else>
                                    {{ scope.row[i.prop] ? scope.row[i.prop] : '--' }}
                                </span>
                                <span>{{ i.subfix }}</span>
                            </span>
                            <span v-if="needDetail" :style="{ color: i?.style?.color }">
                                <span :class="{ del: scope.row.isDelete }">{{ i.prefix }}</span>
                                <span :class="{ del: scope.row.isDelete }" v-if="i.map">
                                    {{ i.map[scope.row[i.prop]] }}
                                </span>
                                <span :class="{ del: scope.row.isDelete }" v-else>
                                    {{ scope.row[i.prop] ? scope.row[i.prop] : '--' }}
                                </span>
                                <span :class="{ del: scope.row.isDelete }">{{ i.subfix }}</span>
                            </span>
                        </template>
                    </el-table-column>
                </slot>
            </template>
            <slot name="settings"></slot>
            <template #empty>
                <slot name="empty"></slot>
            </template>
        </el-table>
        <div v-if="!noPagination" class="flex items-center mt-20px justify-between">
            <div>
                <slot name="PaginationContent"></slot>
            </div>
            <el-pagination v-model:current-page="pageData.pageNum" v-model:page-size="pageData.pageSize"
                           :page-sizes="[10, 20, 30, 40, 50]" layout="total, sizes, prev, pager, next"
                           :total="pageData.total"
                           @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
        </div>
    </div>
</template>
<script setup>
import {ref, watch, computed, onMounted, onActivated} from 'vue'

const props = defineProps({
    tableHeader: {
        type: Array
    },
    tableData: {
        type: Array
    },
    pageInfo: {
        type: Object
    },
    noPagination: {
        type: Boolean,
        default: false
    },
    autoHeight: {
        type: Boolean,
        default: false
    },
    sortMethod: {
        type: Function
    },
    theme: {
        type: String,
        default: 'dark'
    },
    setMaxHeight: {
        type: Boolean,
        default: false
    },
    needDetail: {
        type: Boolean,
        default: false
    },
    selection: {
        type: Boolean,
        default: false
    },
    selectableArr: {
        type: Array,
        default: () => []
    },
    selectableKey: {
        type: String,
        default: ''
    },
    headerCellStyle: {
        type: Object
    }
})

const emits = defineEmits(['pageChange', 'sortChange', 'selectionChange'])
const selectable = (row) => !props.selectableArr.includes(row[props.selectableKey])
const tableRef = ref(null)

const tableDataList = ref([])

const pageData = ref({
    pageNum: 1,
    pageSize: 10,
    total: 0
})

const themeColor = computed(() => {
    const colorMap = {
        dark: {
            background: '#FAFAFC',
            color: '#202536'
        },
        light: {
            background: '#FAFAFC',
            color: '#9497B1'
        }
    }
    return colorMap[props.theme]
})

const handleSizeChange = (ev) => {
    console.log(ev, 'sdfuyhfghuysghsuy11111')
    pageData.value.pageSize = ev
    emits('pageChange', pageData.value)
}

const handleCurrentChange = (ev) => {
    pageData.value.pageNum = ev
    emits('pageChange', pageData.value)
}

const handleSortMethod = (column) => {
    emits('sortChange', column)
}

const handleSelectionChange = (ev) => {
    console.log(111, ev)
    emits('selectionChange', ev)
}

const tableMaxHeight = ref('auto')

watch(() => props.tableData, (newval) => {
    tableDataList.value = newval
})

watch(() => props.pageInfo, (newval) => {
    if (newval) {
        pageData.value = newval
    }
}, {
    immediate: true
})
onMounted(() => {
    const styleHeight = getComputedStyle(tableRef.value).height
    console.log(getComputedStyle(tableRef.value).height)
    if (props.setMaxHeight && styleHeight.endsWith('px')) {
        tableMaxHeight.value = (parseInt(styleHeight) - (!props.noPagination ? 55 : 0)) || 'auto'
    }
})
onActivated(() => {
    const styleHeight = getComputedStyle(tableRef.value).height
    console.log(getComputedStyle(tableRef.value).height)
    if (props.setMaxHeight && styleHeight.endsWith('px')) {
        tableMaxHeight.value = (parseInt(styleHeight) - (!props.noPagination ? 55 : 0)) || 'auto'
    }
})
</script>
<style lang="scss" scoped>
.table-container {
    height: 100%;
}

.del {
    text-decoration: line-through;
}
</style>
